<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h2 v-text="n"></h2>
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁VM</button>
  </div>
</body>

<!-- 
  Vue生命周期：
  
 -->

<script>
  Vue.config.productionTip = false
  new Vue({
    el: '#root',
    // template: `
    // <div>
    //   <h2>当前的n值是：{{n}}</h2>
    //   <button @click="add">点我n+1</button>
    // </div>
    // `,
    data: {
      n: 1,
    },
    methods: {
      add() {
        console.log('add')
        this.n++
      },
      bye() {
        console.log("bye")
        this.$destroy()
      }
    },
    beforeCreate() {
      console.log('boforeCreate')
      // console.log(this)
      // debugger;
    },
    created() {
      console.log('created')
      // console.log(this)
      // debugger;
    },
    beforeMount() {
      console.log('beforeMount')
      // console.log(this)
      // debugger;
    },
    mounted() {
      console.log('mounted')
      // console.log(this)
      // debugger;
    },
    beforeUpdate() {
      console.log("beforeUpdate")
      // console.log(this.n)
      // debugger;
    },
    updated() {
      console.log("updated")
      // console.log(this.n)
      // debugger;
    },
    beforeDestroy() {
      console.log('beforeDestroy')
    },
    destroyed() {
      console.log('destroyed')
    },
  })
</script>

</html>